<template>
  <a-layout id="layout">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <!-- <div class="logo" /> -->
      <div class="logo-block">
          <img src="@/assets/logo-mqj.png" height="30" style="margin-right:10px">
          <span v-if="titleShow">名气商城后台运营管理系统</span>
      </div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>nav 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span>nav 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="layout-header">
        <a-row :gutter="[16, 16]" type="flex">
            <a-col>
                <a-icon
                class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="() => (collapsed = !collapsed)"
                />
            </a-col>
            <a-col :span="20"> 
                <a-menu
                    theme="dark"
                    mode="horizontal"
                    :default-selected-keys="['2']"
                    :style="{ lineHeight: '64px' }"
                >
                    <a-menu-item key="1">
                    nav 1
                    </a-menu-item>
                    <a-menu-item key="2">
                    nav 2
                    </a-menu-item>
                    <a-menu-item key="3">
                    nav 3
                    </a-menu-item>
                </a-menu>
            </a-col>
        </a-row>
       
       
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      titleShow: true
    };
  },

  watch: {
    collapsed(val) {
      console.log(11)
        if (val) {
            this.titleShow = false;
        } else {
            setTimeout(() => {
                this.titleShow = true;
            }, 300)
        }
        
    }
  }
};
</script>
<style lang="scss">
#layout {
    min-height: 100vh;
}

#layout {
    .trigger {
        font-size: 18px;
        line-height: 64px;
        cursor: pointer;
        transition: color 0.3s;
        color: #fff;
    }
    .trigger:hover {
        color: #1890ff;
    }
    .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }
    .layout-header{
        padding: 0 16px;
    }
}
.title {
    font-size: 14px;
    float: left;
    margin-right: 30px;
    padding-left: 22px;
    line-height: 46px;
    color: #fff;
}
.logo-block{
    display: flex;
    align-items: center;
    height: 64px;
    width: 100%;
    padding: 0 24px;

    span{
        font-size: 17px;
        color: #fff;
    }
}
// strong {
//     font-weight: 400;
// }
</style>
